<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td{
           border: 1px solid black;
        }
        table {
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
        td {
            padding: 5px 30px;
        }
    </style>
</head>
<body>
    <!-- // 1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
    //  2、页面打印一个表格，计算出本月银行卡还剩下的余额。  -->
    <h2 style="text-align: center;">2080年12月消费账单</h2>
    
    <script>
        let money = +prompt('请输入银行卡总金额:')
        let sf = +prompt('请输入水费:')
        let df = +prompt('请输入电费:')
        let wf = +prompt('请输入网费:')
        
        document.write(`        
        <table>
            <tr>
                <td>银行卡余额</td>
                <td>水费</td> 
                <td>电费</td> 
                <td>网费</td> 
                <td>银行卡剩余余额</td>     
            </tr>

            <tr>
                <td>${money}</td>
                <td>${sf}</td> 
                <td>${df}</td> 
                <td>${wf}</td> 
                <td>${money - sf - df - wf}</td>     
            </tr>
        </table>
`)
    </script>
</body>
</html>